<template>
    <div class="navMenu">
        <template v-for="fatherMenu in menuData">
            <!-- 最后一级菜单 叶子菜单 -->
            <el-menu-item v-if="fatherMenu.sonMenu.length==0"
                          :index="fatherMenu.url==null?'':fatherMenu.url">
                <i :class="fatherMenu.icon"></i>
                <span slot="title">{{fatherMenu.mname}}</span>
            </el-menu-item>
            <!-- 此菜单下还有子菜单 -->
            <el-submenu v-if="fatherMenu.sonMenu.length!=0"
                        :index="fatherMenu.mid.toString()">
                <template slot="title">
                    <i :class="fatherMenu.icon"></i>
                    <span> {{fatherMenu.mname}}</span>
                </template>
                <!--
                    如果当前是父菜单，有子菜单进行递归，再次调用当前组件，
                    将当前父菜单的子菜单传递给组件
                -->
                <Menu :menuData="fatherMenu.sonMenu"></Menu>
            </el-submenu>
        </template>
    </div>
</template>

<script>
    export default {
        name: "Menu",
        props: ['menuData']
    }
</script>